星尘

22. axios实现异步请求

发表于 更新于 分类于

axios实现异步请求

我们使用了redux之后，数据的走向必须按照redux的方式来进行。即编写action，然后dispatch，reducer处理，最后得到新的数据，在使用axios请求数据的时候，我们也应该按照这种方式来进行。
TodoList中

1
2
3
4
5
6
7
8
9
10
componentDidMount(){
		// Mock data
		const url = 'http://www.mocky.io/v2/5ba88d043200005f00e2eafb'
		axios.get(url).then((res)=> {
		const action = initListDataAction(res.data)
		store.dispatch(action)
	}).catch(()=>{
		alert('HTTP 请求失败！')
	})
}

actionCreator中

1
2
3
4
export const initListDataAction = (value) => ({
	type: INIT_LIST_DATA,
	value
})

actionTypes中

1
export const INIT_LIST_DATA = 'init_list_data'

reducer中

1
2
3
4
5
if (action.type === INIT_LIST_DATA){
	const newState = JSON.parse(JSON.stringify(state));
	newState.list = action.value
	return newState;
}

https://github.com/rexyan/simple_react/tree/axios%E5%AE%9E%E7%8E%B0%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82